<template>
  <div>
    <!-- <router-link to="/">Home</router-link>&emsp;
    <router-link to="/about/aaa/post/ddd">About</router-link>&emsp;
    <router-link to="/four-asd">Four</router-link>&emsp;
    <router-link to="/foo">foo</router-link>&emsp;
    <router-link to="/bar">bar</router-link>&emsp;
    <hr>
    <router-view></router-view>
    <hr>
    <button @click="Clk">点击</button> -->

    <!-- <router-link to="/about/aaa/post/ddd">about</router-link>&emsp;
    <br>
    <router-view></router-view>
    <hr> -->

    <!-- {{$store.state}} -->
    <!-- {{$store.getters}} -->
    <!-- {{count}} -->
    <!-- {{num}} -->
    <!-- {{countAlias}} -->
    <!-- <button @click="btnClk">click</button> -->
    <Home/>
  </div> 
</template>

<script>
import {mapState} from "vuex"
import Home from "./views/Home"
export default {
  methods:{
    btnClk(){
      // this.$store.commit("about/SET_NUM",3)
      // this.$store.dispatch("about/getNum")
    },
    Clk(){
      // this.$router.push('/bar')
      // this.$router.push({path: '/bar'})
      // this.$router.push({name: 'Bar',params:{ id: 1}})
      this.$router.push({path: '/bar',query:{ id: 1}})
    }
  },
  computed:{
    // ...mapState(['count']),
    // ...mapState("about",['num']),

    ...mapState({
      // count: state => state.count,
      // count: function(state){
      //   console.log(this) // 需要使用this，只能使用常规函数
      //   return state.count
      // },
      countAlias: 'count'
    })
  },
  watch:{
    $route(to,from){
      console.log(to,from)
    }
  },
  components:{
    Home
  }
}
</script>

<style scoped>

</style>